<template>
  <div class="global">
    <!-- 操作区 -->
    <div style="margin-bottom: 10px">
      <el-card shadow="hover">
        <div
          style="
            margin-top: 5px;
            display: flex;
          "
        >
          <div style="margin-right: 20px">
            <el-button
              plain
              v-if="!isAdmin"
              type="danger"
              :disabled="batch_delete_flag"
              @click="removeLog"
              ><el-icon style="margin-right: 3px"><Delete /></el-icon
              >批量删除</el-button
            >
          </div>
          <div>
            <el-button type="success" @click="exportUserData" plain :disabled="isAdmin"
              ><el-icon style="margin-right: 3px"><Download /></el-icon
              >导出</el-button
            >
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据表格展示 -->
    <div>
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        stripe
        style="width: 100%"
        height="420"
      >
        <el-table-column type="selection" width="100" />
        <el-table-column fixed prop="operation" label="操作" width="200" />
        <el-table-column prop="name" label="用户" width="200" />
        <el-table-column prop="method" label="请求方式" width="200" />
        <el-table-column prop="ip" label="来源" width="300" />
        <el-table-column prop="createTime" label="请求时间" width="300" />
      </el-table>
    </div>
  </div>

  <!-- 分页部分 -->
  <div class="pagenation">
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="sizes, prev, pager, next"
      :total="total"
      prev-text="第"
      next-text="页"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Delete, Download } from "@element-plus/icons-vue";
import { list, removeByIds } from "../../api/log";
import { useTokenStore } from "@/stores/token";
const TokenStore = useTokenStore();

///////////////////////////////////////////////////////////////////数据区
const tableData = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const ids = ref([]);
const batch_delete_flag = ref(true);

///////////////////////////////////////////////////////////////////////////方法区
//异步获取日志分页数据
//检测是否是测试账号
const isAdmin = ref(false)
onMounted(async () => {
  //检测是否是测试账号
  isAdmin.value = TokenStore.isAdmin;
  const res = await list(pageNo.value, pageSize.value);
  tableData.value = res.data.records;
  total.value = res.data.total;
});

//异步获取日志分页数据
async function initList() {
  await list(pageNo.value, pageSize.value).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.records;
      total.value = res.data.total;
    }
  });
}
//批量删除日志
function removeLog() {
  //批量删除
  removeByIds(ids.value).then((res) => {
    if (res.code === 200) {
      ElMessage({
        showClose: true,
        message: "删除成功！",
        type: "success",
      });
      //异步请求用户分页数据
      initList();
    }
  });
}
//pageSize改变时
function handleSizeChange(value) {
  pageSize.value = value;
  initList();
}
//pageNo改变时
function handleCurrentChange(value) {
  pageNo.value = value;
  initList();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  if (ids.value.length > 0) {
    batch_delete_flag.value = false;
  }
  if (ids.value.length === 0) {
    batch_delete_flag.value = true;
  }
}
//用户数据导出
function exportUserData() {
  window.open("https://www.sixkey-world.top:8600/common/logExport");
  ElMessage({
    showClose: true,
    message: "导出成功！",
    type: "success",
  });
}
</script>

<style scoped>
.global {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f5f5f5;
}
.pagenation {
  margin-top: 15px;
  margin-left: 500px;
}

.el-input {
  width: 260px;
}

.el_form {
  margin-left: 80px;
}
</style>
  